<!DOCTYPE html>
<!--后期需要实现的功能：
	1.“全选”前的确认框antion,用js
	2.每条商品前面的确认框js
	3.商品名称（格式：“商品名字/商品编号/数量”）与数据库购物车表单对应
	4.“-”和“+”实现，要对应修改是否灰色背景，
	->等于“1”，“-”背景变灰
	->等于“库存”，“+”背景变灰
	5.“删除”按钮js+action
	6.“清空购物车”按钮js+action
	7.“总金额”随（选择or取消选择/数量加减/删除商品/全选）操作的即时变化
	8.顶部底部左侧通用结构的修改
 -->
<html>
<head>
	<meta charset="utf-8">
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/cart.css">
	
	<!-- 引入require.js，注意格式 --> 
   	<script src="js/require.js" defer async="true" data-main="js/cart_main"></script>
   		
</head>
<body>
	<!-- 头部栏 -->
    <header class="header_outbox">
		<div class="header_inbox">
	         <div class="loginbox">
	             <p>欢迎访问Husky机械配件商城</p>
	             <a href="index.html" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 访问官网 ]</a>
	             <span id="register-info"> 
	                 <a href="login.html" class="login">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;|</a>
	                 <!-- <img src="images/common/header_line.jpg"> -->
	                 
	                 <a href="register.html" class="login">&nbsp;&nbsp;&nbsp;免费注册&nbsp;&nbsp;</a>
	             </span>
	             <span id="login-info" style="display: none;">
	                 <a href="information_modification.html" id="headerUsername" class="login"></a>
	                 
	                 <a href="#" id="headerLogout" class="login">|&nbsp;&nbsp;退出</a>
	             </span>
	         </div>
             <ul class="my_action fix">
                 <li>
                     <a href="product_like.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的关注</a>
                 </li>
                 <li>
                     <img src="images/common/mix_car.png">
                     <a href="cart.html">购物车<span id="cartQuantity">[0]</span></a>
                 </li>
                 <li>
                     <a href="index.html">我的商城</a>
                 </li>
             </ul>
        </div>
    </header>
	<!--头部导航结束-->
	<!-- 最上方留白处-->
    <div class="white" style="height:28px;">
        <p>Husky</p>
    </div>
    
    <div class="action_search_box wrapper_box">
        <a class="logo" href="index.html"></a>
        <div class="inputbox" style="margin-top:10px;">
        	<div>
        		<a class="search_icon " ></a>
            	<input type="text" id="keyword" name="keyword" placeholder="请输入您感兴趣的内容">
           	 	<a id="searchBtn" class="searchbtn" href="javascript:search();">搜&nbsp;索</a>
            </div>
        </div>
        <img class="telephonenumber" src="images/common/telephone_number.jpg" >
    </div>
    
    <!--分割线-->
	<hr style="height: 1px; border: none; border-top: 1px solid #DDD; margin: 25px 0 0px;">

<div>
	<div class="content_box clear_fix">
	<!-- 我的左侧菜单开始 -->
		<!-- 左部导航栏 -->
			<div class="left_nav l">
		    	<div class="person_info">
		    		<div class="head_img">
		    			<img src="images/common/deimg.png" alt="">
		    		</div>
		    		<div class="welcome_info">
		    			欢迎回来，[<a id="left_username"></a>]
		    		</div>
		    		<div class="level_score">
		    			<div class="clearfix">
		    				<div class="l"></div>
		    				<div class="level_value l"></div>
		    			</div>
		    			<div class="clearfix">
		    				<div class="l" style="margin-left:33px;">积分：</div>
		    				<div id="left_userpoints" class="score_value l">0</div>
		    			</div>
		    		</div>
		    	</div>
		    	<div>
		    		<div class="title">
		    			<div class="dashed">我的交易</div>
		    		</div>
		    		<div class="item"><a href="order_list.html">我的订单</a></div>
		    		<div class="item active"><a href="cart.html">我的购物车</a></div>
		    		<!-- <div class="item"><a href="#">我的积分</a></div> -->
		    		<!-- <div class="item"><a href="#">我的积分消费</a></div> -->
		    		<div class="item"><a href="product_like.html">我的关注</a></div>
		    		<!-- <div class="item"><a href="#">我的购买咨询</a></div> -->
		    		<!-- <div class="item"><a href="#">我的优惠券</a></div> -->
		    		<div class="item"><a href="address_management.html">收货地址管理</a></div>
		    		<!-- <div class="item"><a href="#">我的推荐</a></div> -->
		    	</div>
		    	<div style="margin-top:16px;">
		    		<div class="title">
		    			<div class="dashed">我的账户</div>
		    		</div>
		    		<div class="item"><a href="information_modification.html">个人资料</a></div>
		    		<div class="item"><a href="password_modification.html">修改密码</a></div>
		    	</div>
		    </div>
      
	    
  		<!-- 购物车信息开始 -->  
	    <div class="shopcar_right_box l">
	    
	    	<!-- 购物车为空 页面 -->
		    <div id="cart-empty" class="empty_cart_container" style="display: none;">
		    	 <img  src="images/common/empty_cart.png" alt="">
		         <div id="" class="empty_title"> &nbsp;购物车没有商品</div>
		         <a id="" href="index.html" class="empty_target">去商城</a>
		    </div>
	    	
	    	
	    	<!-- 购物车为空 页面 -->
		    <div id="cart-container">
		    	<h1>商品信息</h1>
	            <!--购物车表头-->
		        <div  class="shopcar_righ_top ">
	                <div class="shopcar_infor00">
		            	<input id="selectAll" type="checkbox"  >&nbsp;全选
		            </div>
		            <div class="shopcar_infor01" >
		            	商品名称
		            </div>
		            <div class="shopcar_infor02" >
		            	单价（元）
		            </div>
		            <div class="shopcar_infor03" >
		            	数量
		            </div>
		            <div class="shopcar_infor04" >
		            	实付（元）
		            </div>
		            <div class="shopcar_infor05" >
		            	操作
		            </div>
		        </div>
		        
	            <!--购物车信息-->
		        <div id="cart-item-container" ><!-- class="shop_car_probox"> -->
<!-- 这里使用模板添加商品 -->
		        </div>
		        
				<!-- 总计结算 -->        
		        <div class="shop_car_buy">
		            <a href="javascript:void(0)" class="shop_car_buy01 l" id="clear">
		            	清空购物车
		            </a>
	<!-- 这里跳转到 订单确认 页 -->
		            <a id="submit" class="shop_car_buy02 r" href="#">
		             	提交订单
		             </a>
		            <div class="shop_car_buy03 r">
		            	<strong>
		            		<span id="amount" class="total_price">
		            			￥8280.00
		            		</span>
		            	</strong>
		            </div>
		            <div class="shop_car_buy04 r" >
		            	商品金额：
		            </div>
	            </div>
            </div>
    	</div>
    	
</div>




	<!-- 产品服务开始 -->
	<div id="product_service" class="content_box clearfix">
        <ul>
            <li class="item l">
                <p class="item_icon icon1 l"></p>
                <div class="item_text l">
                    <p class="text_tit">真实货源</p>
                    <p class="text_info">一手货源&nbsp;真实存在</p>
                </div>
            </li>
            <li class="item l">
                <p class="item_icon icon2 l"></p>
                <div class="item_text l">
                    <p class="text_tit">品质保障</p>
                    <p class="text_info">垂直专业&nbsp;优选厂商</p>
                </div>
            </li>
            <li class="item l">
                <p class="item_icon icon3 l"></p>
                <div class="item_text l">
                    <p class="text_tit">服务保障</p>
                    <p class="text_info">专业服务团队</p>
                </div>
            </li>
            <li class="item l">
                <p class="item_icon icon4 l"></p>
                <div class="item_text l">
                    <p class="text_tit">交易透明</p>
                    <p class="text_info">买卖双方面谈价格</p>
                </div>
            </li>
        </ul>
	</div>
	<!-- 产品服务结束 -->
</div>	
	<!-- 底部开始 -->
	<div class="footerbox">
        <div class="footer">
	        <div class="content_box clearfix">
	            <div class="footerinside">
	                <h1>新手指南</h1>
	                <a href="#" target="_blank">免费注册</a>
	                <a href="#" target="_blank">个人资料及密码</a>
	                <a href="#" target="_blank">商品关注</a>
	                <a href="#" target="_blank">查询订单</a>
	                <a href="#" target="_blank">购物流程</a>
	            </div>
	            <div class="footerinside">
	                <h1>付款/退款</h1>
	                <a href="#" target="_blank">在线支付</a>
	                <a href="#" target="_blank">银行转账</a>
	                <a href="#" target="_blank">发票办理</a>
	            </div>
	            <div class="footerinside">
	                <h1>配送方式</h1>
	                <a href="#" target="_blank">快递配送</a>
	                <a href="#" target="_blank">零担物流</a>
	            </div>
	            <div class="footerinside">
	                <h1>售后服务</h1>
	                <a href="#" target="_blank">退货流程</a>
	                <a href="#" target="_blank">退货政策</a>
	            </div>
	            <div id="currentfooterInside" class="footerinside">
	                <h1>帮助中心</h1>
	                <a href="#" target="_blank">常见热点问题</a>
	                <a href="#" target="_blank">联系我们</a>
	                <a href="#" target="_blank">投诉与建议</a>
	            </div>
	        </div>
        </div>
        <div class="copyright_bgcolor">
	        <div class="copyright">Copyright © 2018 XXXX数字科技有限公司 版权所有 保留一切权利 鲁ICP备XXXXXXXX号-X</div>
        </div>
    </div>
	<!-- 底部结束 -->
</body>


<!-- 购物车中的商品列表行模板 -->
<script id="cart-item-tpl" type="text/x-handlebars-template">
	{{#each this}}
	<div class="shop_car_probox">
		<div class="pro00" >
			<input type="checkbox" class="all_checkbox" data-product-id={{productId}}>
		</div>
		<div class="pro01" >
			<input name="id" type="hidden" value="9206">
			<a href="product_detail.html?pid={{productId}}" target="_blank">
				{{name}}
			</a>
			</input>
		</div>
		<div class="pro02">
			￥{{price}}
		</div>
		<div class="pro03">
			<div class="product_select_num_value clearfix">
				<a href="javascript:void(0);" class="minus_btn l" data-product-id={{productId}}></a>
			    <input autocomplete="off" class="l" id="quantity{{productId}}" data-stock={{stock}} 
						name="quantity" type="text" value="{{quantity}}" minquantity="1" maxlength="4">
				</input>
			    <a href="javascript:void(0);" class="plus_btn l " data-product-id={{productId}}></a>	
			</div>
		</div>
		<div class="pro04">
			<span class="single_total">
				￥{{totalPrice}}&nbsp;&nbsp;
			</span>
		</div>
		<div class="pro05">
		    <a class="delete r" data-product-id={{productId}} href="javascript:void(0);" >
				删除
			</a>
		</div>
	</div>
	{{/each}}
</script>


</html>